<template>
    <div>
        <el-card>
            <div class="header flex-row">
                <!-- logo -->
                <div class="logo">

                    <router-link
                        to="/home"
                        tag="a"
                        class="flex-row"
                    >
                        <img
                            src="../../../assets/images/logo-b.png"
                            alt=""
                        >
                        <span>CloudMusic</span>
                    </router-link>
                </div>
                <!-- 导航 -->
                <div class="nav flex-row">
                    <el-menu
                        :default-active="$route.name"
                        mode="horizontal"
                        active-text-color="#fa2800"
                        router
                    >
                        <el-menu-item
                            :index="item.id"
                            v-for="item in menus"
                            :key="item.id"
                        >{{ item.name }}</el-menu-item>
                    </el-menu>
                </div>

                <!-- 搜索 -->
                <div
                    class="search"
                    @click="openSearchPop"
                >
                    <div class="search_box">
                        <i class="iconfont nicesearch-o"></i>
                        <span>搜索音乐、MV、歌单、歌手</span>
                    </div>
                </div>
                <!-- 用户信息 -->
                <div class="user_box flex-row">
                    <div
                        class="user flex-row"
                        v-if="loginStatu"
                    >
                        <el-avatar
                            class="avatar"
                            :src="userInfo.avatarUrl"
                        ></el-avatar>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                {{ userInfo.nickname }}
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <a
                                    href="#"
                                    @click="personal(userInfo.userId)"
                                >
                                    <el-dropdown-item
                                        class="item"
                                        icon="el-icon-user"
                                    >个人主页</el-dropdown-item>
                                </a>
                                <el-dropdown-item icon="el-icon-medal">我的等级</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-setting">个人设置</el-dropdown-item>
                                <a
                                    href="#"
                                    @click="logout"
                                >
                                    <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
                                </a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!-- 登录按钮 -->
                    <div
                        class="login_btn"
                        v-else
                    >
                        <div
                            class="item"
                            @click="login"
                        >
                            登录
                        </div>
                    </div>
                </div>
            </div>

        </el-card>
        <!-- 搜索dialog -->
        <div
            class="search-wrap"
            :class="[searchOpenClass, searchCloseClass]"
        >
            <div
                class="background-flitter"
                @click="closeSearchPop"
            ></div>
            <div class="search-box">
                <div class="search-bg"></div>
                <div class="search-cover">
                    <input
                        class="text"
                        type="text"
                        placeholder="搜索音乐、MV、歌单、歌手"
                        ref="input"
                        v-model="keyword"
                        v-on:keyup.enter="search"
                    />

                </div>
                <div class="search-hot">
                    <div class="title flex-row">
                        <i class="iconfont nicelishi"></i>
                        <span>历史搜索</span>
                        <p @click="clearSearch">清空</p>
                    </div>
                    <ul
                        class="tags "
                        v-if="historysList.length > 0"
                    >
                        <li
                            v-for="(item, index) in historysList"
                            :key="index"
                        >
                            <el-tag
                                type="info"
                                size="medium"
                                closable
                                @click="tag(item.first)"
                                @close="deleteItem(item)"
                            >{{ item.first }}</el-tag>
                        </li>
                    </ul>
                </div>
                <div class="search-hot">
                    <div class="title flex-row">
                        <i class="iconfont niceremensousuo"></i>
                        <span>热门搜索</span>
                    </div>
                    <ul
                        class="tags "
                        v-if="hots.length > 0"
                    >
                        <li
                            v-for="item of hots"
                            :key="item.first"
                        >
                            <el-tag
                                type="info"
                                size="medium"
                                @click="tag(item.first)"
                            >{{ item.first }}</el-tag>
                        </li>
                    </ul>
                </div>
                <div
                    class="btn-close flex-center"
                    @click="closeSearchPop"
                >
                    <i class="close-light "></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations, } from 'vuex'

export default {
    data() {
        return {
            activeIndex: 'home',
            menus: [
                {
                    id: 'home',
                    name: '发现音乐'
                },
                {
                    id: 'rank',
                    name: '排行榜'
                },
                {
                    id: 'playlist',
                    name: '歌单'
                },
                {
                    id: 'singer',
                    name: '歌手'
                },
                // {
                //     id: 'video',
                //     name: '视频'
                // },
                {
                    id: 'mv',
                    name: 'MV'
                }
            ],
            searchOpenClass: '',
            searchCloseClass: '',
            keyword: '',
            hots: [],
            historysList: [],
        }
    },

    created() {
        this.getSearchHot()
    },
    computed: {
        ...mapGetters(['userInfo', 'loginStatu',])

    },
    methods: {
        // 展开搜索框
        openSearchPop() {
            this.searchOpenClass = 'open'
            this.searchCloseClass = ''
            this.$nextTick(() => {
                this.$refs.input.focus()
                if (JSON.parse(localStorage.getItem('historys'))) {
                    this.historysList = JSON.parse(localStorage.getItem('historys'))
                }

            })
        },
        // 关闭搜索框
        closeSearchPop() {
            this.searchOpenClass = ''
            this.searchCloseClass = 'close'
        },
        // 获取热搜列表
        async getSearchHot() {
            const { data: res } = await this.$api.getSearchHot()
            if (res.code !== 200) {
                return this.message.error('获取热搜列表失败！');
            }
            // console.log(res);
            this.hots = res.result.hots

        },
        // 点击标签搜索
        tag(keyword) {
            this.closeSearchPop()
            this.$router.push({
                name: 'search',
                query: {
                    keyword
                }
            })
        },
        // 搜索
        search() {
            if (this.keyword.split(' ').join('').length !== 0) {
                let obj = {}
                obj.first = this.keyword
                this.historysList.push(obj)
                // 把历史搜索列表存储到localStorage中
                localStorage.setItem('historys', JSON.stringify(this.historysList))
                this.closeSearchPop()
                this.$router.push({
                    name: 'search',
                    query: {
                        keyword: this.keyword
                    }
                })
            }
        },
        // 删除历史搜索单个
        deleteItem(item) {
            this.keyword = ''
            this.historysList = JSON.parse(localStorage.getItem('historys'))
            this.historysList.splice(item, 1)
            localStorage.setItem('historys', JSON.stringify(this.historysList))
        },
        // 清空搜索历史
        clearSearch() {
            this.keyword = ''
            this.historysList = JSON.parse(localStorage.getItem('historys'))
            this.historysList = ''
            localStorage.setItem('historys', JSON.stringify(this.historysList))

        },

        // 点击按钮跳转到登录页面
        login() {
            this.$router.push('/login')
        },
        // 退出登录
        async logout() {
            const res = await this.$api.logout();
            // console.log(res);
            if (res.status !== 200) {
                return this.message.error('退出登录失败！');
            }
            this.$message.success('退出登录成功！')
            //清除cookie,token,userInfo
            localStorage.removeItem('cookie')
            localStorage.removeItem('token')
            localStorage.removeItem('userInfo')
            localStorage.loginStatu = false
            this.setLoginStatu(false)
            this.setUserInfo()
            //跳转到首页 
            this.$router.push('/home')
        },
        // 跳转到个人主页
        personal(userId) {

            this.$router.push({
                name: 'personal',
                query: {
                    userId
                }
            })
        },


        ...mapMutations({
            setUserInfo: 'SET_USERINFO',
            setLoginStatu: 'SET_LOGINSTATU',
        }),
    },
}
</script>

<style lang="less" scoped>
div {
    .el-card {
        width: 100%;
        height: 70px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        .header {
            max-width: 1380px;
            min-width: 1080px;
            width: 100%;
            height: 70px;
            margin: 0 auto;
            padding: 0 30px;
            .logo {
                width: 180px;
                height: 40px;
                line-height: 40px;
                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
                span {
                    font-size: 24px;
                    color: #ff6f6f;
                }
            }
            .nav {
                flex: 1;
                height: 70px;
                .el-menu {
                    height: 100%;
                    margin-left: 30px;
                    border-bottom: none;
                }
            }
            .search {
                width: 240px;
                height: 35px;
                display: flex;
                align-items: center;
                margin-right: 20px;
                cursor: pointer;
                border: 1px solid #c5c7ca;
                border-radius: 5px;
                i {
                    font-size: 16px;
                    color: #ccc;
                    padding: 0 5px;
                }
                span {
                    color: #ccc;
                }
            }

            .user_box {
                width: auto;
                .el-dropdown {
                    padding-left: 10px;
                    &:hover {
                        cursor: pointer;
                    }
                }
                .login_btn {
                    .item {
                        width: 50px;
                        height: 30px;
                        line-height: 30px;
                        background: #f7f7f7;
                        border-radius: 10px;
                        text-align: center;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover {
                            color: #fa2800;
                        }
                    }
                }
            }
        }
    }
    .search-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: none;
        align-items: center;
        justify-content: center;
        .background-flitter {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(194, 196, 201, 0.4);
            backdrop-filter: blur(2px);
        }
        .search-box {
            width: 60%;
            min-width: 900px;
            position: fixed;
            top: 12%;
            left: 18%;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 10px 50px 5px rgba(241, 242, 243, 0.6);

            .search-bg {
                width: 100%;
                height: 200px;
                background-image: url("../../../assets/images/personal.jpg");
                background-repeat: no-repeat;
                background-position: 50%;
                background-size: cover;
                box-sizing: border-box;
                filter: blur(2px);
                border-radius: 6px 6px 0 0;
            }
            .search-cover {
                position: absolute;
                top: 20%;
                left: 10%;
                width: 80%;
                height: 40px;
                line-height: 40px;
                border-radius: 6px;
                opacity: 0.4;
                color: #fff;
                .text {
                    width: 100%;
                    height: 100%;
                    background: #000;
                    border-radius: 6px;
                    text-align: center;
                    &:focus {
                        color: #fff;
                    }
                    &::placeholder {
                        color: #fff;
                    }
                }
            }
            .search-hot {
                width: 100%;
                margin: 30px 0 10px 40px;
                .title {
                    i {
                        margin-right: 10px;
                        font-size: 24px;
                        color: #fa2800;
                    }
                    p {
                        position: absolute;
                        right: 40px;
                        color: #fa2800;
                        cursor: pointer;
                    }
                }
                .tags {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    li {
                        margin: 0 20px 8px 0;
                        .el-tag {
                            &:hover {
                                color: #161e27;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
            .btn-close {
                position: absolute;
                bottom: -40px;
                left: 0;
                width: 100%;
                z-index: 99;
                cursor: pointer;
                text-align: center;
                .close-light {
                    display: inline-block;
                    background-image: url("../../../assets/images/close.svg");
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    vertical-align: middle;
                    width: 28px;
                    height: 28px;
                }
            }
        }

        &.open {
            z-index: 9999;
            display: flex;
        }
        &.close {
            display: none;
        }
    }
}
</style>